<template>
	<view style="min-height: 100vh;background: #FFFFFF;" class="content">
		<view class="" style="padding: 20rpx;">
			<!-- <view class="display-flex align-items">

				<uv-icon name="clock" color="#666666" size="22"></uv-icon>
				<view class="font-size-26 margin-left-10 color-666">
					阿萨大大撒旦 {{(answerlist.length/(answerIndex + 1) )* 10}}

				</view>
			</view> -->
			<view class="display-flex margin-top-10 align-items">
				<!-- <view class="file-1">
					<uv-line-progress :percentage="answerlist.length/(answerIndex + 1)" active-color="#2671CE"
						height="7" :showText="false"></uv-line-progress>
				</view> -->

			</view>
			<view class="font-size-30 font-weight-bold">
				单选题<text class="font-size-26 margin-left-20 color-666">
					{{answerIndex + 1}}/{{answerlist.length}}
				</text>
			</view>
			<view class="font-size-26 margin-top-20 color-666">
				{{answerIndex + 1}}、{{answerlist[answerIndex]?.question}}
			</view>
			<view class="">
				<view @click="chooseanswer(answerlist[answerIndex]?.id,index)"
					v-for="item,index in answerlist[answerIndex]?.show_answer" :key="index"
					:class="zindex == index?'item-active':'item'">
					{{index}}.{{item}}
				</view>
				<!-- <view class="item-active">
					A.第一个答案
				</view> -->
			</view>
		</view>
		<view class="position-fixed width-100 display-flex" style="bottom: 0;">

			<view @click="operate(0)" class="bin2">
				上一题
			</view>
			<view @click="operate(1)" class="bin1">
				{{answerIndex == answerlist.length - 1?'提交':'下一题'}}
			</view>
		</view>
		<uv-popup ref="popup" @change="change">
			<view>
				<text>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。 明月几时有？把酒问青天。
					不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。
					转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。
					但愿人长久，千里共婵娟。</text>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		nativeUI,
		navigateTo,
		navigateBack
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const answerlist = ref([])
	const answerIndex = ref(0) //当前的题
	const solution = ref([])
	const zindex = ref(-1) //当前选中的下标
	onLoad(function(option) {
		answer()
	});
	onShow(function() {});

	function chooseanswer(id, index) {
		if (zindex.value == index) {
			zindex.value = -1
		} else {
			zindex.value = index
		}
		
		solution.value[answerIndex.value] = {
			id,
			value: index
		}
	}
	async function operate(type) {
		if (zindex.value == -1) return nativeUI('请选择您的答案！')
		if (type) {
			if (answerIndex.value == answerlist.value.length - 1) {
				console.log(JSON.stringify(solution.value));
		
				const {
					code,
					data
				} = await api.user_answer({answer:JSON.stringify(solution.value)})
			} else {
				answerIndex.value++
			}
		} else {
			if (answerIndex.value == 0) {
				console.log('停');
			} else {
				answerIndex.value--
			}
		}
		zindex.value = -1
	}
	async function answer() {
		const {
			code,
			data
		} = await api.answer()
		if (code == 1) {
			answerlist.value = data
			// let array = []
			// for (var i = 0; i < data.length; i++) {
			// 	array[i] = []
			// }
			// solution.value = array
		}
	}
	onReady(function() {});
	onReachBottom(function() {});
</script>

<style scoped lang="scss">
	.item {
		border-radius: 10rpx;
		border: 1px solid #CCCCCC;
	}

	.item-active,
	.item {
		padding: 29rpx 31rpx;
		font-size: 26rpx;
		font-weight: bold;
		margin-top: 40rpx;
	}

	.item-active {
		background: #E4F0FF;
		border-radius: 10rpx;
		border: 1px solid #E4F0FF;
	}

	.bin1 {
		background: #2671CE;
		color: #FFFFFF;
	}

	.bin2,
	.bin1 {
		width: 375rpx;
		height: 97rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bin2 {
		color: #333333;
		background: #F8F8F7;
	}
</style>